<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的账户 - B2B电商平台</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#0E2E8B',
            neutral: {
              100: '#F5F7FA',
              200: '#E5E6EB',
              300: '#C9CDD4',
              400: '#86909C',
              500: '#4E5969',
              600: '#272E3B',
              700: '#1D2129',
            }
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .nav-active {
        @apply bg-primary/10 text-primary border-l-4 border-primary;
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
      }
      .content-section {
        @apply hidden;
      }
      .content-section.active {
        @apply block animate-fadeIn;
      }
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }
      .animate-fadeIn {
        animation: fadeIn 0.3s ease-out forwards;
      }
    }
  </style>
</head>

<body class="font-inter bg-neutral-100 text-neutral-700 min-h-screen">
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-700 mb-8">我的账户</h1>
    
    <div class="flex flex-col lg:flex-row gap-6">
      <!-- 左侧导航 -->
      <aside class="lg:w-1/4 w-full bg-white rounded-xl shadow-sm p-4">
        <nav class="space-y-1">
          <a href="#account-info" class="nav-active flex items-center gap-3 px-4 py-3 rounded-lg transition-all" data-target="account-info">
            <i class="fa fa-user-circle-o text-lg"></i>
            <span>账户信息</span>
          </a>
          
          <a href="#orders" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-neutral-100 transition-all" data-target="orders">
            <i class="fa fa-file-text-o text-lg"></i>
            <span>我的订单</span>
          </a>
          
          <a href="#quotes" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-neutral-100 transition-all" data-target="quotes">
            <i class="fa fa-quote-right text-lg"></i>
            <span>报价单管理</span>
          </a>
          
          <a href="#addresses" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-neutral-100 transition-all" data-target="addresses">
            <i class="fa fa-map-marker text-lg"></i>
            <span>收货地址</span>
          </a>
          
          <a href="#payment-methods" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-neutral-100 transition-all" data-target="payment-methods">
            <i class="fa fa-credit-card text-lg"></i>
            <span>付款方式</span>
          </a>
          
          <a href="#invoices" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-neutral-100 transition-all" data-target="invoices">
            <i class="fa fa-file-pdf-o text-lg"></i>
            <span>发票管理</span>
          </a>
          
          <a href="#settings" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-neutral-100 transition-all" data-target="settings">
            <i class="fa fa-cog text-lg"></i>
            <span>账户设置</span>
          </a>
          
          <a href="#help" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-neutral-100 transition-all" data-target="help">
            <i class="fa fa-question-circle-o text-lg"></i>
            <span>帮助中心</span>
          </a>
        </nav>
        
        <div class="mt-8 pt-6 border-t border-neutral-200">
          <a href="#logout" class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-neutral-100 text-red-500 transition-all">
            <i class="fa fa-sign-out text-lg"></i>
            <span>退出登录</span>
          </a>
        </div>
      </aside>
      
      <!-- 右侧内容区域 -->
      <main class="lg:w-3/4 w-full space-y-6">
        <!-- 账户信息内容 -->
        <div id="account-info" class="content-section active space-y-6">
          <!-- 账户概览卡片 -->
          <section class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
              <div class="flex items-center gap-4">
                <div class="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center text-primary text-3xl">
                  <i class="fa fa-building"></i>
                </div>
                <div>
                  <h2 class="text-xl font-bold">上海宏图商贸有限公司</h2>
                  <p class="text-neutral-500 text-sm">会员等级：金牌供应商</p>
                  <p class="text-neutral-500 text-sm">会员有效期：2026-12-31</p>
                </div>
              </div>
              <div class="flex gap-3">
                <button class="px-4 py-2 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-all">
                  <i class="fa fa-edit mr-1"></i> 编辑资料
                </button>
                <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all">
                  <i class="fa fa-refresh mr-1"></i> 续费会员
                </button>
              </div>
            </div>
          </section>
          
          <!-- 账户状态卡片 -->
          <section class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
              <div class="flex justify-between items-start">
                <div>
                  <p class="text-neutral-500 text-sm">待处理订单</p>
                  <h3 class="text-2xl font-bold mt-1">12</h3>
                </div>
                <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-orange-500">
                  <i class="fa fa-clock-o"></i>
                </div>
              </div>
              <a href="#pending-orders" class="text-primary text-sm mt-4 inline-flex items-center hover:underline">
                查看全部 <i class="fa fa-angle-right ml-1"></i>
              </a>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
              <div class="flex justify-between items-start">
                <div>
                  <p class="text-neutral-500 text-sm">待付款金额</p>
                  <h3 class="text-2xl font-bold mt-1">¥28,500</h3>
                </div>
                <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-500">
                  <i class="fa fa-credit-card"></i>
                </div>
              </div>
              <a href="#unpaid" class="text-primary text-sm mt-4 inline-flex items-center hover:underline">
                立即支付 <i class="fa fa-angle-right ml-1"></i>
              </a>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
              <div class="flex justify-between items-start">
                <div>
                  <p class="text-neutral-500 text-sm">可用额度</p>
                  <h3 class="text-2xl font-bold mt-1">¥150,000</h3>
                </div>
                <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-500">
                  <i class="fa fa-rmb"></i>
                </div>
              </div>
              <a href="#credit" class="text-primary text-sm mt-4 inline-flex items-center hover:underline">
                提升额度 <i class="fa fa-angle-right ml-1"></i>
              </a>
            </div>
          </section>
          
          <!-- 公司信息详情 -->
          <section class="bg-white rounded-xl shadow-sm p-6">
            <h2 class="text-xl font-bold mb-6 pb-3 border-b border-neutral-200">公司信息</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <p class="text-neutral-500 text-sm mb-1">统一社会信用代码</p>
                <p>91310115XXXXXXXXXX</p>
              </div>
              
              <div>
                <p class="text-neutral-500 text-sm mb-1">公司地址</p>
                <p>上海市浦东新区XX路XX号XX大厦XX层</p>
              </div>
              
              <div>
                <p class="text-neutral-500 text-sm mb-1">成立时间</p>
                <p>2015年06月18日</p>
              </div>
              
              <div>
                <p class="text-neutral-500 text-sm mb-1">注册资本</p>
                <p>1000万元人民币</p>
              </div>
              
              <div>
                <p class="text-neutral-500 text-sm mb-1">经营范围</p>
                <p>日用百货、电子产品、机械设备、五金交电的销售，商务咨询服务</p>
              </div>
              
              <div>
                <p class="text-neutral-500 text-sm mb-1">员工人数</p>
                <p>50-100人</p>
              </div>
            </div>
          </section>
          
          <!-- 联系人信息 -->
          <section class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex justify-between items-center mb-6 pb-3 border-b border-neutral-200">
              <h2 class="text-xl font-bold">联系人信息</h2>
              <button class="text-primary text-sm hover:underline">
                <i class="fa fa-plus mr-1"></i> 添加联系人
              </button>
            </div>
            
            <div class="overflow-x-auto">
              <table class="w-full">
                <thead>
                  <tr class="text-left text-neutral-500 border-b border-neutral-200">
                    <th class="pb-3 font-medium">姓名</th>
                    <th class="pb-3 font-medium">职位</th>
                    <th class="pb-3 font-medium">电话</th>
                    <th class="pb-3 font-medium">邮箱</th>
                    <th class="pb-3 font-medium">权限</th>
                    <th class="pb-3 font-medium">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="border-b border-neutral-200">
                    <td class="py-4">张明</td>
                    <td>采购经理</td>
                    <td>138xxxx5678</td>
                    <td>zhangming@example.com</td>
                    <td><span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">管理员</span></td>
                    <td>
                      <div class="flex gap-2">
                        <button class="text-neutral-500 hover:text-primary"><i class="fa fa-edit"></i></button>
                        <button class="text-neutral-500 hover:text-red-500"><i class="fa fa-trash-o"></i></button>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="py-4">李华</td>
                    <td>采购员</td>
                    <td>139xxxx1234</td>
                    <td>lihua@example.com</td>
                    <td><span class="px-2 py-1 bg-neutral-100 text-neutral-600 text-xs rounded-full">普通用户</span></td>
                    <td>
                      <div class="flex gap-2">
                        <button class="text-neutral-500 hover:text-primary"><i class="fa fa-edit"></i></button>
                        <button class="text-neutral-500 hover:text-red-500"><i class="fa fa-trash-o"></i></button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>
        </div>
        
        <!-- 我的订单内容 -->
        <div id="orders" class="content-section space-y-6">
          <section class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex justify-between items-center mb-6 pb-3 border-b border-neutral-200">
              <h2 class="text-xl font-bold">我的订单</h2>
              <div class="flex gap-4">
                <div class="relative">
                  <input type="text" placeholder="搜索订单号" class="pl-10 pr-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                  <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
                </div>
                <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all">
                  <i class="fa fa-filter mr-1"></i> 筛选
                </button>
              </div>
            </div>
            
            <!-- 订单状态筛选 -->
            <div class="flex flex-wrap gap-2 mb-6">
              <button class="px-4 py-2 bg-primary text-white rounded-full text-sm">全部订单</button>
              <button class="px-4 py-2 bg-white border border-neutral-200 hover:border-primary hover:text-primary rounded-full text-sm transition-all">待付款</button>
              <button class="px-4 py-2 bg-white border border-neutral-200 hover:border-primary hover:text-primary rounded-full text-sm transition-all">待发货</button>
              <button class="px-4 py-2 bg-white border border-neutral-200 hover:border-primary hover:text-primary rounded-full text-sm transition-all">已发货</button>
              <button class="px-4 py-2 bg-white border border-neutral-200 hover:border-primary hover:text-primary rounded-full text-sm transition-all">已完成</button>
              <button class="px-4 py-2 bg-white border border-neutral-200 hover:border-primary hover:text-primary rounded-full text-sm transition-all">已取消</button>
            </div>
            
            <!-- 订单列表 -->
            <div class="space-y-4">
              <!-- 订单1 -->
              <div class="border border-neutral-200 rounded-lg overflow-hidden">
                <div class="bg-neutral-50 px-4 py-3 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
                  <div>
                    <span class="font-medium">订单号：ORD20230512001</span>
                    <span class="ml-4 text-neutral-500">2023-05-12 09:35</span>
                  </div>
                  <span class="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded-full">已发货</span>
                </div>
                <div class="p-4">
                  <div class="flex flex-col sm:flex-row gap-4 mb-4">
                    <img src="https://picsum.photos/80/80" alt="产品图片" class="w-20 h-20 object-cover rounded">
                    <div class="flex-1">
                      <h3 class="font-medium">工业级精密万用表 数字数显多功能电工仪表</h3>
                      <p class="text-neutral-500 text-sm">规格：UT890C | 数量：5台</p>
                    </div>
                    <div class="text-right">
                      <p class="font-medium">¥450.00</p>
                      <p class="text-sm text-neutral-500">单价</p>
                    </div>
                  </div>
                  <div class="border-t border-neutral-100 pt-3 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
                    <p>共1件商品 总计：<span class="font-bold text-lg">¥2,250.00</span>（含运费¥0.00）</p>
                    <div class="flex gap-2">
                      <button class="px-3 py-1 border border-neutral-200 rounded hover:border-primary hover:text-primary text-sm transition-all">查看详情</button>
                      <button class="px-3 py-1 border border-primary text-primary rounded hover:bg-primary/5 text-sm transition-all">确认收货</button>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 订单2 -->
              <div class="border border-neutral-200 rounded-lg overflow-hidden">
                <div class="bg-neutral-50 px-4 py-3 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
                  <div>
                    <span class="font-medium">订单号：ORD20230508015</span>
                    <span class="ml-4 text-neutral-500">2023-05-08 14:22</span>
                  </div>
                  <span class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded-full">已完成</span>
                </div>
                <div class="p-4">
                  <div class="flex flex-col sm:flex-row gap-4 mb-4">
                    <img src="https://picsum.photos/80/81" alt="产品图片" class="w-20 h-20 object-cover rounded">
                    <div class="flex-1">
                      <h3 class="font-medium">高清工业内窥镜 管道检测摄像头 5.5mm探头</h3>
                      <p class="text-neutral-500 text-sm">规格：3米有线 | 数量：2台</p>
                    </div>
                    <div class="text-right">
                      <p class="font-medium">¥1,280.00</p>
                      <p class="text-sm text-neutral-500">单价</p>
                    </div>
                  </div>
                  <div class="border-t border-neutral-100 pt-3 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
                    <p>共1件商品 总计：<span class="font-bold text-lg">¥2,560.00</span>（含运费¥0.00）</p>
                    <div class="flex gap-2">
                      <button class="px-3 py-1 border border-neutral-200 rounded hover:border-primary hover:text-primary text-sm transition-all">查看详情</button>
                      <button class="px-3 py-1 border border-primary text-primary rounded hover:bg-primary/5 text-sm transition-all">申请售后</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 分页 -->
            <div class="mt-6 flex justify-center">
              <div class="flex items-center gap-1">
                <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary disabled:opacity-50 disabled:hover:border-neutral-200 disabled:hover:text-neutral-500" disabled>
                  <i class="fa fa-angle-left"></i>
                </button>
                <button class="w-9 h-9 flex items-center justify-center rounded bg-primary text-white">1</button>
                <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">2</button>
                <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">3</button>
                <span>...</span>
                <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">8</button>
                <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">
                  <i class="fa fa-angle-right"></i>
                </button>
              </div>
            </div>
          </section>
        </div>
        
        <!-- 报价单管理内容 -->
        <div id="quotes" class="content-section space-y-6">
          <section class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex justify-between items-center mb-6 pb-3 border-b border-neutral-200">
              <h2 class="text-xl font-bold">报价单管理</h2>
              <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all">
                <i class="fa fa-plus mr-1"></i> 申请新报价
              </button>
            </div>
            
            <!-- 报价单筛选 -->
            <div class="flex flex-wrap gap-2 mb-6">
              <button class="px-4 py-2 bg-primary text-white rounded-full text-sm">全部报价单</button>
              <button class="px-4 py-2 bg-white border border-neutral-200 hover:border-primary hover:text-primary rounded-full text-sm transition-all">待审核</button>
              <button class="px-4 py-2 bg-white border border-neutral-200 hover:border-primary hover:text-primary rounded-full text-sm transition-all">已报价</button>
              <button class="px-4 py-2 bg-white border border-neutral-200 hover:border-primary hover:text-primary rounded-full text-sm transition-all">已失效</button>
              <button class="px-4 py-2 bg-white border border-neutral-200 hover:border-primary hover:text-primary rounded-full text-sm transition-all">已转化为订单</button>
            </div>
            
            <!-- 报价单列表 -->
            <div class="overflow-x-auto">
              <table class="w-full">
                <thead>
                  <tr class="text-left text-neutral-500 border-b border-neutral-200">
                    <th class="pb-3 font-medium">报价单号</th>
                    <th class="pb-3 font-medium">申请日期</th>
                    <th class="pb-3 font-medium">商品名称</th>
                    <th class="pb-3 font-medium">数量</th>
                    <th class="pb-3 font-medium">报价状态</th>
                    <th class="pb-3 font-medium">有效期至</th>
                    <th class="pb-3 font-medium">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="border-b border-neutral-200">
                    <td class="py-4">QUO20230510002</td>
                    <td>2023-05-10</td>
                    <td>智能工业控制器 PLC编程模块</td>
                    <td>10台</td>
                    <td><span class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded-full">已报价</span></td>
                    <td>2023-06-10</td>
                    <td>
                      <div class="flex gap-2">
                        <button class="text-primary hover:underline"><i class="fa fa-eye mr-1"></i> 查看</button>
                        <button class="text-primary hover:underline"><i class="fa fa-shopping-cart mr-1"></i> 下单</button>
                      </div>
                    </td>
                  </tr>
                  <tr class="border-b border-neutral-200">
                    <td class="py-4">QUO20230505018</td>
                    <td>2023-05-05</td>
                    <td>高精度传感器 温度湿度检测模块</td>
                    <td>50个</td>
                    <td><span class="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded-full">待审核</span></td>
                    <td>-</td>
                    <td>
                      <div class="flex gap-2">
                        <button class="text-primary hover:underline"><i class="fa fa-eye mr-1"></i> 查看</button>
                        <button class="text-neutral-500 hover:text-primary"><i class="fa fa-edit mr-1"></i> 编辑</button>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="py-4">QUO20230428007</td>
                    <td>2023-04-28</td>
                    <td>工业级交换机 8口千兆以太网</td>
                    <td>3台</td>
                    <td><span class="px-2 py-1 bg-neutral-100 text-neutral-600 text-xs rounded-full">已失效</span></td>
                    <td>2023-05-28</td>
                    <td>
                      <div class="flex gap-2">
                        <button class="text-primary hover:underline"><i class="fa fa-eye mr-1"></i> 查看</button>
                        <button class="text-primary hover:underline"><i class="fa fa-repeat mr-1"></i> 重新申请</button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>
        </div>
        
        <!-- 收货地址内容 -->
        <div id="addresses" class="content-section space-y-6">
          <section class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex justify-between items-center mb-6 pb-3 border-b border-neutral-200">
              <h2 class="text-xl font-bold">收货地址管理</h2>
              <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all">
                <i class="fa fa-plus mr-1"></i> 添加新地址
              </button>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <!-- 地址1 -->
              <div class="border border-neutral-200 rounded-lg p-4 relative card-hover">
                <div class="absolute top-3 right-3">
                  <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded">默认地址</span>
                </div>
                <h3 class="font-medium mb-2">张明（采购部）</h3>
                <p class="text-neutral-600 mb-1">138xxxx5678</p>
                <p class="text-neutral-600 mb-3">上海市浦东新区XX路XX号XX大厦XX层 采购部（收） 200120</p>
                <div class="flex gap-2">
                  <button class="px-3 py-1 border border-neutral-200 rounded hover:border-primary hover:text-primary text-sm transition-all">编辑</button>
                  <button class="px-3 py-1 border border-neutral-200 rounded hover:border-red-500 hover:text-red-500 text-sm transition-all">删除</button>
                </div>
              </div>
              
              <!-- 地址2 -->
              <div class="border border-neutral-200 rounded-lg p-4 relative card-hover">
                <h3 class="font-medium mb-2">李华（仓库）</h3>
                <p class="text-neutral-600 mb-1">139xxxx1234</p>
                <p class="text-neutral-600 mb-3">上海市松江区XX路XX号XX工业园XX栋 仓库（收） 201612</p>
                <div class="flex gap-2">
                  <button class="px-3 py-1 border border-neutral-200 rounded hover:border-primary hover:text-primary text-sm transition-all">编辑</button>
                  <button class="px-3 py-1 border border-neutral-200 rounded hover:border-red-500 hover:text-red-500 text-sm transition-all">删除</button>
                  <button class="px-3 py-1 border border-primary text-primary rounded hover:bg-primary/5 text-sm transition-all">设为默认</button>
                </div>
              </div>
              
              <!-- 地址3 -->
              <div class="border-2 border-dashed border-neutral-200 rounded-lg p-8 flex flex-col items-center justify-center text-neutral-500 hover:border-primary hover:text-primary transition-all cursor-pointer">
                <i class="fa fa-plus-circle text-2xl mb-2"></i>
                <p>添加新地址</p>
              </div>
            </div>
          </section>
        </div>
        
        <!-- 付款方式内容 -->
        <div id="payment-methods" class="content-section space-y-6">
          <section class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex justify-between items-center mb-6 pb-3 border-b border-neutral-200">
              <h2 class="text-xl font-bold">付款方式管理</h2>
              <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all">
                <i class="fa fa-plus mr-1"></i> 添加付款方式
              </button>
            </div>
            
            <div class="space-y-4">
              <!-- 付款方式1 -->
              <div class="border border-neutral-200 rounded-lg p-4 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 card-hover">
                <div class="flex items-center gap-3">
                  <div class="w-10 h-10 rounded bg-blue-100 flex items-center justify-center text-blue-600">
                    <i class="fa fa-credit-card"></i>
                  </div>
                  <div>
                    <h3 class="font-medium">企业对公账户</h3>
                    <p class="text-neutral-500 text-sm">开户名：上海宏图商贸有限公司</p>
                    <p class="text-neutral-500 text-sm">账号：6222 **** **** 1234</p>
                    <p class="text-neutral-500 text-sm">开户行：中国工商银行上海浦东分行</p>
                  </div>
                </div>
                <div class="flex gap-2 self-end md:self-auto">
                  <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded">默认付款方式</span>
                  <button class="text-neutral-500 hover:text-primary"><i class="fa fa-edit"></i></button>
                </div>
              </div>
              
              <!-- 付款方式2 -->
              <div class="border border-neutral-200 rounded-lg p-4 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 card-hover">
                <div class="flex items-center gap-3">
                  <div class="w-10 h-10 rounded bg-green-100 flex items-center justify-center text-green-600">
                    <i class="fa fa-credit-card"></i>
                  </div>
                  <div>
                    <h3 class="font-medium">企业支付宝</h3>
                    <p class="text-neutral-500 text-sm">账户名：shht@example.com</p>
                    <p class="text-neutral-500 text-sm">开户名：上海宏图商贸有限公司</p>
                  </div>
                </div>
                <div class="flex gap-2 self-end md:self-auto">
                  <button class="px-3 py-1 border border-primary text-primary rounded hover:bg-primary/5 text-sm transition-all">设为默认</button>
                  <button class="text-neutral-500 hover:text-primary"><i class="fa fa-edit"></i></button>
                </div>
              </div>
              
              <!-- 添加新付款方式 -->
              <div class="border-2 border-dashed border-neutral-200 rounded-lg p-6 flex items-center justify-center gap-3 text-neutral-500 hover:border-primary hover:text-primary transition-all cursor-pointer">
                <i class="fa fa-plus-circle text-xl"></i>
                <p>添加新的付款方式</p>
              </div>
            </div>
            
            <div class="mt-6 p-4 bg-neutral-50 rounded-lg border border-neutral-200">
              <h3 class="font-medium mb-2 flex items-center gap-2">
                <i class="fa fa-info-circle text-primary"></i>
                付款说明
              </h3>
              <ul class="list-disc pl-5 text-neutral-600 space-y-1 text-sm">
                <li>对公转账请在附言中注明订单号，以便我们快速确认您的付款</li>
                <li>支付宝付款请使用企业支付宝账户，个人支付宝付款可能导致对账延迟</li>
                <li>所有付款方式需经过财务审核确认后生效</li>
              </ul>
            </div>
          </section>
        </div>
        
        <!-- 发票管理内容 -->
        <div id="invoices" class="content-section space-y-6">
          <section class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex justify-between items-center mb-6 pb-3 border-b border-neutral-200">
              <h2 class="text-xl font-bold">发票管理</h2>
              <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all">
                <i class="fa fa-plus mr-1"></i> 申请发票
              </button>
            </div>
            
            <!-- 发票筛选 -->
            <div class="flex flex-wrap gap-2 mb-6">
              <button class="px-4 py-2 bg-primary text-white rounded-full text-sm">全部发票</button>
              <button class="px-4 py-2 bg-white border border-neutral-200 hover:border-primary hover:text-primary rounded-full text-sm transition-all">待开具</button>
              <button class="px-4 py-2 bg-white border border-neutral-200 hover:border-primary hover:text-primary rounded-full text-sm transition-all">已开具</button>
              <button class="px-4 py-2 bg-white border border-neutral-200 hover:border-primary hover:text-primary rounded-full text-sm transition-all">已作废</button>
            </div>
            
            <!-- 发票列表 -->
            <div class="overflow-x-auto">
              <table class="w-full">
                <thead>
                  <tr class="text-left text-neutral-500 border-b border-neutral-200">
                    <th class="pb-3 font-medium">发票编号</th>
                    <th class="pb-3 font-medium">关联订单</th>
                    <th class="pb-3 font-medium">开票金额</th>
                    <th class="pb-3 font-medium">发票类型</th>
                    <th class="pb-3 font-medium">开票状态</th>
                    <th class="pb-3 font-medium">申请日期</th>
                    <th class="pb-3 font-medium">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="border-b border-neutral-200">
                    <td class="py-4">INV20230515003</td>
                    <td>ORD20230512001</td>
                    <td>¥2,250.00</td>
                    <td>增值税专用发票</td>
                    <td><span class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded-full">已开具</span></td>
                    <td>2023-05-12</td>
                    <td>
                      <div class="flex gap-2">
                        <button class="text-primary hover:underline"><i class="fa fa-download mr-1"></i> 下载</button>
                        <button class="text-primary hover:underline"><i class="fa fa-eye mr-1"></i> 查看详情</button>
                      </div>
                    </td>
                  </tr>
                  <tr class="border-b border-neutral-200">
                    <td class="py-4">INV20230509017</td>
                    <td>ORD20230508015</td>
                    <td>¥2,560.00</td>
                    <td>增值税专用发票</td>
                    <td><span class="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded-full">待开具</span></td>
                    <td>2023-05-08</td>
                    <td>
                      <div class="flex gap-2">
                        <button class="text-neutral-500 hover:text-primary"><i class="fa fa-edit mr-1"></i> 修改</button>
                        <button class="text-neutral-500 hover:text-red-500"><i class="fa fa-times mr-1"></i> 取消</button>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="py-4">INV20230430009</td>
                    <td>ORD20230425012</td>
                    <td>¥5,680.00</td>
                    <td>增值税普通发票</td>
                    <td><span class="px-2 py-1 bg-neutral-100 text-neutral-600 text-xs rounded-full">已作废</span></td>
                    <td>2023-04-25</td>
                    <td>
                      <div class="flex gap-2">
                        <button class="text-primary hover:underline"><i class="fa fa-repeat mr-1"></i> 重新申请</button>
                        <button class="text-primary hover:underline"><i class="fa fa-eye mr-1"></i> 查看详情</button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>
        </div>
        
        <!-- 账户设置内容 -->
        <div id="settings" class="content-section space-y-6">
          <section class="bg-white rounded-xl shadow-sm p-6">
            <h2 class="text-xl font-bold mb-6 pb-3 border-b border-neutral-200">账户设置</h2>
            
            <div class="space-y-6">
              <!-- 基本设置 -->
              <div>
                <h3 class="text-lg font-medium mb-4">基本设置</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label class="block text-neutral-500 text-sm mb-1">登录账号</label>
                    <p class="font-medium">shht@example.com</p>
                  </div>
                  <div>
                    <label class="block text-neutral-500 text-sm mb-1">企业名称</label>
                    <p class="font-medium">上海宏图商贸有限公司</p>
                  </div>
                  <div>
                    <label class="block text-neutral-500 text-sm mb-1">联系人</label>
                    <p class="font-medium">张明</p>
                  </div>
                  <div>
                    <label class="block text-neutral-500 text-sm mb-1">联系电话</label>
                    <p class="font-medium">138xxxx5678</p>
                  </div>
                </div>
                <button class="mt-4 px-4 py-2 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-all">
                  <i class="fa fa-edit mr-1"></i> 编辑基本信息
                </button>
              </div>
              
              <!-- 密码设置 -->
              <div class="pt-6 border-t border-neutral-200">
                <h3 class="text-lg font-medium mb-4">密码设置</h3>
                <p class="text-neutral-500 text-sm mb-4">为了账户安全，建议定期更换密码，密码长度不少于8位，包含字母和数字</p>
                <button class="px-4 py-2 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-all">
                  <i class="fa fa-lock mr-1"></i> 修改登录密码
                </button>
              </div>
              
              <!-- 安全设置 -->
              <div class="pt-6 border-t border-neutral-200">
                <h3 class="text-lg font-medium mb-4">安全设置</h3>
                <div class="space-y-4">
                  <div class="flex flex-col md:flex-row md:items-center justify-between gap-3">
                    <div>
                      <h4 class="font-medium">手机验证</h4>
                      <p class="text-neutral-500 text-sm">已绑定手机：138****5678</p>
                    </div>
                    <button class="px-4 py-2 border border-neutral-200 rounded-lg hover:border-primary hover:text-primary transition-all self-start">
                      更换手机
                    </button>
                  </div>
                  
                  <div class="flex flex-col md:flex-row md:items-center justify-between gap-3">
                    <div>
                      <h4 class="font-medium">邮箱验证</h4>
                      <p class="text-neutral-500 text-sm">已绑定邮箱：shht@example.com</p>
                    </div>
                    <button class="px-4 py-2 border border-neutral-200 rounded-lg hover:border-primary hover:text-primary transition-all self-start">
                      更换邮箱
                    </button>
                  </div>
                  
                  <div class="flex flex-col md:flex-row md:items-center justify-between gap-3">
                    <div>
                      <h4 class="font-medium">登录保护</h4>
                      <p class="text-neutral-500 text-sm">异地登录验证、敏感操作验证</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer self-start">
                      <input type="checkbox" checked class="sr-only peer">
                      <div class="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                    </label>
                  </div>
                </div>
              </div>
              
              <!-- 消息通知 -->
              <div class="pt-6 border-t border-neutral-200">
                <h3 class="text-lg font-medium mb-4">消息通知</h3>
                <div class="space-y-4">
                  <div class="flex items-center justify-between">
                    <div>
                      <h4 class="font-medium">订单状态通知</h4>
                      <p class="text-neutral-500 text-sm">订单状态变更时收到通知</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                      <input type="checkbox" checked class="sr-only peer">
                      <div class="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                    </label>
                  </div>
                  
                  <div class="flex items-center justify-between">
                    <div>
                      <h4 class="font-medium">报价单通知</h4>
                      <p class="text-neutral-500 text-sm">报价单状态变更时收到通知</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                      <input type="checkbox" checked class="sr-only peer">
                      <div class="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                    </label>
                  </div>
                  
                  <div class="flex items-center justify-between">
                    <div>
                      <h4 class="font-medium">促销活动通知</h4>
                      <p class="text-neutral-500 text-sm">接收最新的促销活动信息</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                      <input type="checkbox" class="sr-only peer">
                      <div class="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
        
        <!-- 帮助中心内容 -->
        <div id="help" class="content-section space-y-6">
          <section class="bg-white rounded-xl shadow-sm p-6">
            <h2 class="text-xl font-bold mb-6 pb-3 border-b border-neutral-200">帮助中心</h2>
            
            <div class="space-y-6">
              <!-- 常见问题 -->
              <div>
                <h3 class="text-lg font-medium mb-4">常见问题</h3>
                
                <!-- 折叠面板 -->
                <div class="space-y-3">
                  <!-- 问题1 -->
                  <div class="border border-neutral-200 rounded-lg overflow-hidden">
                    <button class="w-full flex justify-between items-center p-4 text-left focus:outline-none bg-neutral-50 hover:bg-neutral-100 transition-all">
                      <span>如何修改企业基本信息？</span>
                      <i class="fa fa-angle-down text-neutral-500 transition-transform"></i>
                    </button>
                    <div class="p-4 border-t border-neutral-200">
                      <p class="text-neutral-600">您可以在"账户设置"页面中点击"编辑基本信息"按钮进行企业信息修改。修改后需要经过平台审核，审核通过后新信息将生效。一般审核时间为1-2个工作日。</p>
                    </div>
                  </div>
                  
                  <!-- 问题2 -->
                  <div class="border border-neutral-200 rounded-lg overflow-hidden">
                    <button class="w-full flex justify-between items-center p-4 text-left focus:outline-none bg-neutral-50 hover:bg-neutral-100 transition-all">
                      <span>如何申请开具发票？</span>
                      <i class="fa fa-angle-down text-neutral-500 transition-transform"></i>
                    </button>
                    <div class="p-4 border-t border-neutral-200 hidden">
                      <p class="text-neutral-600">在"发票管理"页面点击"申请发票"按钮，选择需要开票的订单，填写发票信息（包括发票类型、抬头、税号等），提交后等待财务审核。审核通过后，电子发票将发送至您的邮箱，纸质发票将按地址邮寄。</p>
                    </div>
                  </div>
                  
                  <!-- 问题3 -->
                  <div class="border border-neutral-200 rounded-lg overflow-hidden">
                    <button class="w-full flex justify-between items-center p-4 text-left focus:outline-none bg-neutral-50 hover:bg-neutral-100 transition-all">
                      <span>如何提升账户信用额度？</span>
                      <i class="fa fa-angle-down text-neutral-500 transition-transform"></i>
                    </button>
                    <div class="p-4 border-t border-neutral-200 hidden">
                      <p class="text-neutral-600">账户信用额度与您的企业资质、交易记录和付款情况相关。您可以在"账户信息"页面点击"提升额度"按钮，提交企业资质证明（如营业执照、财务报表等）申请提升额度。我们将根据您的实际情况进行评估。</p>
                    </div>
                  </div>
                  
                  <!-- 问题4 -->
                  <div class="border border-neutral-200 rounded-lg overflow-hidden">
                    <button class="w-full flex justify-between items-center p-4 text-left focus:outline-none bg-neutral-50 hover:bg-neutral-100 transition-all">
                      <span>订单取消后，款项何时退还？</span>
                      <i class="fa fa-angle-down text-neutral-500 transition-transform"></i>
                    </button>
                    <div class="p-4 border-t border-neutral-200 hidden">
                      <p class="text-neutral-600">订单取消后，我们将在1-3个工作日内办理退款手续。退款到账时间取决于您的付款方式：支付宝付款通常1-2个工作日到账，银行转账通常3-5个工作日到账。您可以在"我的订单"中查看退款进度。</p>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 联系客服 -->
              <div class="pt-6 border-t border-neutral-200">
                <h3 class="text-lg font-medium mb-4">联系客服</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div class="border border-neutral-200 rounded-lg p-4 text-center card-hover">
                    <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mx-auto mb-3">
                      <i class="fa fa-phone text-xl"></i>
                    </div>
                    <h4 class="font-medium mb-1">电话咨询</h4>
                    <p class="text-primary font-medium">400-888-XXXX</p>
                    <p class="text-neutral-500 text-sm mt-1">工作日 9:00-18:00</p>
                  </div>
                  
                  <div class="border border-neutral-200 rounded-lg p-4 text-center card-hover">
                    <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mx-auto mb-3">
                      <i class="fa fa-envelope text-xl"></i>
                    </div>
                    <h4 class="font-medium mb-1">邮件咨询</h4>
                    <p class="text-primary font-medium">service@example.com</p>
                    <p class="text-neutral-500 text-sm mt-1">24小时内回复</p>
                  </div>
                  
                  <div class="border border-neutral-200 rounded-lg p-4 text-center card-hover">
                    <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mx-auto mb-3">
                      <i class="fa fa-comments text-xl"></i>
                    </div>
                    <h4 class="font-medium mb-1">在线客服</h4>
                    <p class="text-primary font-medium">点击咨询</p>
                    <p class="text-neutral-500 text-sm mt-1">工作日 9:00-21:00</p>
                  </div>
                </div>
              </div>
              
              <!-- 下载中心 -->
              <div class="pt-6 border-t border-neutral-200">
                <h3 class="text-lg font-medium mb-4">下载中心</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <a href="#" class="flex items-center gap-3 p-4 border border-neutral-200 rounded-lg hover:border-primary hover:bg-primary/5 transition-all">
                    <div class="w-10 h-10 rounded bg-primary/10 flex items-center justify-center text-primary">
                      <i class="fa fa-file-pdf-o"></i>
                    </div>
                    <div class="flex-1">
                      <h4 class="font-medium">B2B平台使用手册.pdf</h4>
                      <p class="text-neutral-500 text-sm">2.5MB · 2023-01-15</p>
                    </div>
                    <i class="fa fa-download text-neutral-400"></i>
                  </a>
                  
                  <a href="#" class="flex items-center gap-3 p-4 border border-neutral-200 rounded-lg hover:border-primary hover:bg-primary/5 transition-all">
                    <div class="w-10 h-10 rounded bg-primary/10 flex items-center justify-center text-primary">
                      <i class="fa fa-file-excel-o"></i>
                    </div>
                    <div class="flex-1">
                      <h4 class="font-medium">批量采购模板.xlsx</h4>
                      <p class="text-neutral-500 text-sm">1.2MB · 2023-03-20</p>
                    </div>
                    <i class="fa fa-download text-neutral-400"></i>
                  </a>
                </div>
              </div>
            </div>
          </section>
        </div>
      </main>
    </div>
  </div>
  
  <script>
    // 导航切换功能
    document.querySelectorAll('aside nav a').forEach(link => {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        
        // 获取目标内容区域ID
        const targetId = this.getAttribute('data-target');
        
        // 移除所有导航项的active状态
        document.querySelectorAll('aside nav a').forEach(item => {
          item.classList.remove('nav-active');
        });
        
        // 为当前点击的导航项添加active状态
        this.classList.add('nav-active');
        
        // 隐藏所有内容区域
        document.querySelectorAll('.content-section').forEach(section => {
          section.classList.remove('active');
        });
        
        // 显示目标内容区域
        document.getElementById(targetId).classList.add('active');
      });
    });
    
    // 退出登录确认
    document.querySelector('a[href="#logout"]').addEventListener('click', function(e) {
      e.preventDefault();
      if(confirm('确定要退出登录吗？')) {
        // 这里添加退出登录的逻辑
        alert('已退出登录');
      }
    });
    
    // 帮助中心折叠面板功能
    document.querySelectorAll('#help button').forEach(button => {
      button.addEventListener('click', function() {
        const content = this.nextElementSibling;
        const icon = this.querySelector('i');
        
        // 切换内容显示状态
        content.classList.toggle('hidden');
        
        // 旋转图标
        if (content.classList.contains('hidden')) {
          icon.style.transform = 'rotate(0deg)';
        } else {
          icon.style.transform = 'rotate(180deg)';
        }
      });
    });
  </script>
</body>
</html>